<template>
	<view class="write-exam">
		<div class="header">
			<page-head
				class="title_words" 
				checkPlatform="false" 
				:title="pageTitle" 
				fColor="#191A1A" 
				style="color: #ffffff;" 
				icon="none" 
				:font-size="32"
			>
				<div slot="icon" @click="handleExit">
					<uni-icons type="left" size="24"></uni-icons>
				</div>
			</page-head>
            <div class="success-info">
				<div>
					<span class="time">{{formatDateString(info.submitTime)}}</span>
					<span class="tag">{{info.questionType}}</span>
					<span class="tag1" v-if="isShow">{{info.knowledgeType}}</span>
				</div>
				<div class="count-word-time">
					<span>单词数：{{info.wordNum}}</span>
					<span>作答时长：{{formattedTime(info.duration || 0)}}</span>
				</div>
            </div>
		</div>
		<div class="main-content">
			<div class="tab-content">
				<!-- 记录 -->
				<div class="tab">
                    <div class="answer-title">我的作答</div>
                    <div class="answer-text">
						<rich-text :nodes="info.userAnswer"></rich-text>
					</div>
				</div>
			</div>
		</div>
	</view>
</template>

<script>
import { writingSubmitDetail } from '@/api/exam/exam.js'
export default {
	data() {
		return {
            record: '',
			info: [], 
			pageTitle: '',
		}
	},
	onLoad(options) {
		this.record = options.id
		this.getInfo()
	},
	computed: {
		isShow(){
			if(this.info.examName && this.info.examName.indexOf('Task 1') != -1){
				return false
			}
			return true
		}
	},
	methods: {
		formatDateString(dateString) {
			// 创建一个 Date 对象
			const date = new Date(dateString);
		
			// 提取年份、月份和日期部分
			const year = date.getFullYear();
			const month = String(date.getMonth() + 1).padStart(2, '0'); // 月份从0开始，所以需要+1，并填充前导零
			const day = String(date.getDate()).padStart(2, '0'); // 填充前导零
		
			// 拼接成所需的格式
			return `${year}/${month}/${day}`;
		},
		formattedTime(time) {
			const hours = Math.floor(time / 3600);
			const minutes = Math.floor((time % 3600) / 60);
			const secs = time % 60;
			return `${String(hours).padStart(2, '0')}:${String(minutes).padStart(2, '0')}:${String(secs).padStart(2, '0')}`;
		},
		// 左上角关闭按钮
		handleExit(){
			uni.navigateBack()
		},
		getInfo() {
			this.$tip.loading()
			writingSubmitDetail({
				id: this.record
			}).then((res) => {
				this.info = res.data
                this.pageTitle = res.data.examExName
				this.$tip.loaded()
			})
		},
		
	}
}
</script>
<style>
page{
	position: relative !important;
	top: 0 !important;
}
</style>
<style scoped lang="scss">

@function toRem($rpx) {
	//$rpx为需要转换的字号
	@return #{$rpx * 100 / 750 / 4}rem;
}
.content {
	padding-bottom: toRem(184);
}
.write-exam {
	position: relative;
	background-color: #F5F7FA;
	width: 100%;
	min-height: 100vh;
}
.cont-txt {
	padding: toRem(20) 0;
}
.image-div {
	width: 100%;
	text-align: center;
	image: {
		width: 100%;
	}
}
.customer-service-btn::after {
	border: none;
}
.read-img{
	position: fixed;
	width: 100%;
	height: 100%;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	image{
		width: 100%;
		height: 100%;

	}
	.toast{
		width: toRem(300);
		height: toRem(200);
		background-color: #fff;
		border-radius: 10rpx;
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translate(-50%,-50%);
	}
}
.header{
	position: sticky;
	left: 0;
	top: 0;
	background: linear-gradient(to bottom, #DCDEFF, #F5F7FA);
	// background: linear-gradient(45deg, #DCDEFF 0%, #DCDEFF 100%);
	z-index: 100;
    .success-info{
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        color: #16171A;
        font-size: toRem(37);
        margin-top: toRem(47);
        padding: 0 toRem(40);
        box-sizing: border-box;
        width: 100%;
        margin-bottom: toRem(20);
		&>div{
			display: flex;
			align-items: center;
			font-size: toRem(24);
			&:first-child{
				margin-bottom: toRem(8);
			}
			&:last-child span:first-child{
				margin-right: toRem(40);
			}
		}
		.time{
			font-size: toRem(35);
			color: #16171A;
			font-weight: bold;
		}
		.tag{
			border: 2rpx solid #8287FA;
			color: #8287FA;
			padding: toRem(5) toRem(8);
			font-size: toRem(24);
			margin: 0 toRem(15);
		}
		.tag1{
			background-color: #8287FA;
			border-radius: toRem(8);
			color: #fff;
			font-size: toRem(24);
			padding: toRem(6) toRem(20);
		}
        
    }
}
.main-content{
	position: relative;
	z-index: 1;
	width: 100%;
	height: 100%;
	padding: toRem(10) toRem(25) toRem(45);
	box-sizing: border-box;
	.tab-content{
		box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.2);
		border-radius: 15rpx;
		padding: toRem(25) toRem(30) toRem(30);
		box-sizing: border-box;
		background: linear-gradient(180deg, #F2F1FF 0%, #FFFFFF 80rpx);
		overflow: hidden;
		.tab{
			width: 100%;
			height: 100%;
			overflow: hidden;
		}
		.flag-blank{
            display: flex;
            align-items: center;
            .seriesType{
                color: #16171A;
                font-size: toRem(30);
                font-weight: bold;
            }
            .exam-name{
                margin: 0 toRem(10);
                border: 1rpx solid #8287FA;
                padding: toRem(7);
                color: #8287FA;
                font-size: toRem(24);
            }
            .flag-item {
                height: toRem(40);
                line-height: toRem(40);
                text-align: center;
                padding: toRem(4) toRem(14);
                background: rgba(253, 69, 61, 0.08);
                display: inline-block;
                border-radius: toRem(10);
                font-size: toRem(26);
                color: #fff;
                background-color: #8287FA;

            }

        }
        .answer-title{
            color: #16171A;
            font-size: toRem(34);
            margin: 0 0 toRem(24);
            font-weight: bold;
        }
		.answer-text{
			width: 100%;
			padding: toRem(20) toRem(18);
			box-sizing: border-box;
			background-color: #EEF1F7;
			border-radius: toRem(15);
			margin-bottom: toRem(27);
            font-size: toRem(26);
            color: #323232;
            font-weight: 500;
            line-height: toRem(40);
		}
		
	}
}

.sub-info{
    color: #16171A;
    font-size: toRem(23);
    margin-top: toRem(40);
    &>div{
        display: flex;
        align-items: center;
        margin-bottom: toRem(24);
        & span:first-child{
            margin-right: toRem(30);
        }
    }
}
</style>

